<template>
	<view class="contain">
		<view class="footer">
			<view class="nav">
				<view class="menu">
					<u-tabs id="firstUtabs" :list="menulist" lineWidth="30"
						:activeStyle="{color: '#303133', fontWeight: 'bold',}" :current="curNow"
						:inactiveStyle="{color: '#606266',}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="menuClick"></u-tabs>
					<!-- 					<u-search id="search" v-model="requestSelectParams.workOrderId" height="20" placeholder="输入工单号搜索"
						borderColor="#242424" :showAction="false">
					</u-search> -->
				</view>
			</view>
			<!-- 未完成 -->
			<view class="xinghao footer-public" v-if="curNow==0" v-for="(item,index) in lists1" :key="index">
				<view class="detail">
					<view>{{item.workOrderId}}</view>
					<view v-if="item.maId">外部：{{item.maId }}</view>
					<span>时间：{{item.createTime || ''}}</span>
					<span>联系：{{item.connectorName|| ''}}/{{item.connectorPhone||''}}</span>
					<span>店铺：{{item.storeId|| ''}}/{{item.storeName|| ''}}</span>
					<span>地点：{{item.storeAddress|| ''}}</span>
					<view v-if="item.faultDescribe!=null">故障：{{item.faultDescribe||''}}</view>
					<!-- 					<span>备注：{{item.remark==null?'':item.remark}}</span> -->
				</view>
				<view class="button">
					<u-button @click="buttonClick1(item,buttonlist1[index])" type="primary" size="mini">
						{{buttonlist1[index]}}
					</u-button>
				</view>
				<view class="state">
					{{item.workOrderStatusName[0]}}
				</view>
			</view>
			<!-- 已完成 -->
			<view class="xinghao footer-public" v-if="curNow==1" v-for="(item,index) in lists2" :key="index">
				<view class="detail">
					<span>{{item.workOrderId}}</span>
					<span v-if="item.maId">外部：{{item.maId }}</span>
					<span>时间：{{item.createTime|| ''}}</span>
					<span>联系：{{item.connectorName|| ''}}/{{item.connectorPhone|| ''}}</span>
					<span>店铺：{{item.storeId|| ''}}/{{item.storeName|| ''}}</span>
					<span>地点：{{item.storeAddress|| ''}}</span>
					<span v-if="item.faultDescribe!=null">故障：{{item.faultDescribe||''}}</span>
					<span>备注：{{item.remark==null?'':item.remark}}</span>
				</view>
				<view class="button">
					<u-button type="primary" @click="buttonClick1(item,buttonlist2[index])" size="mini">
						{{buttonlist2[index]}}
					</u-button>
				</view>
				<view class="state">
					{{item.workOrderStatusName[0]}}
				</view>
			</view>
			<u-select v-model="pickerShow" :list="userColmns" @confirm="selectConfirm"></u-select>
			<!-- 搜索 -->
			<!-- 			<view class="xinghao footer-public" v-if="menu==2" v-for="(item,index) in selectList" :key="index">
				<view class="detail">
					<span>{{item.workOrderId}}</span>
					<span v-if="item.maId">外部：{{item.maId }}</span>
					<span>时间：{{item.createTime|| ''}}</span>
					<span>联系：{{item.connectorName|| ''}}/{{item.connectorPhone|| ''}}</span>
					<span>店铺：{{item.storeId || ''}}/{{item.storeName|| ''}}</span>
					<span>地点：{{item.storeAddress|| ''}}</span>
					<span v-if="item.faultDescribe!=null">故障：{{item.faultDescribe||''}}</span>
					<span>备注：{{item.remark==null?'':item.remark}}</span>
				</view>
				<view class="button">
					<u-button type="primary"
						@click="this.recordMenu==0?buttonClick1(item,buttonlistSelect[index]):buttonClick2(item,buttonlistSelect[index])"
						size="mini">
						{{buttonlistSelect[index]}}
					</u-button>
				</view>
				<view class="state">
					{{item.workOrderStatusName[0]}}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				requestParams1: {
					// customer: "",
					pageNum: 1,
					pageSize: 10,
					sbAreaSupAdmin: undefined, //区域负责人id
					workOrderStatusArray: "0, 5, 10, 20, 16, -1" //未结单，进行中，审核中，驳回单
					// workOrderStatus: [0, 5, 10, 15, 25, 20, 30, 31, 32, 34, 35, 36, 38, 39, 40, 16] //工单状态
				},
				requestParams2: {
					// customer: "",
					pageNum: 1,
					pageSize: 10,
					sbAreaSupAdmin: undefined,
					workOrderStatusArray: "15, 100, 25" //已经完成
				},
				lists1: [], //未完成列表
				lists2: [], //已完成列表
				userList: [], //工程师列表
				userColmns: [], //工程师名字列表
				userId: null,
				menulist: [{
					name: '未完成'
				}, {
					name: '已完成'
				}],
				curNow: 0,
				pickerShow: false, //工程师列表选择
				sendWorkOrderId: '', //分派接单者id
				// 搜索功能
				requestSelectParams: {
					customer: "",
					workOrderId: '',
					pageNum: 1,
					pageSize: 10,
					sbAreaSupAdmin: undefined,
					workOrderStatus: []
				},
				selectList: [],
				recordMenu: 0,
			};
		},
		onReachBottom() {
			if (this.curNow == 0) {
				this.requestParams1.pageNum = this.requestParams1.pageNum + 1;
				this.mountSelect1();
			} else if (this.curNow == 1) {
				this.requestParams2.pageNum = this.requestParams2.pageNum + 1;
				this.mountSelect2();
			} else {
				console.log('查找');
			}

		},
		onLoad: async function() {
			const resData = await request({
				url: "prod-api/system/user/list",
				method: "get"
			})
			this.userList = resData.rows
			console.log('工程师：', resData);
			for (let s of this.userList) {
				this.userColmns.push({
					label: s.userName,
					value: s.userId
				})
			}
			console.log('userColmns:', this.userColmns);
		},
		onShow: async function() {
			uni.showLoading({
				title: '正在加载中'
			})
			await request({
				url: "prod-api/getInfo",
				method: "get"
			}).then((res) => {
				if (res.code < 400) {
					this.userId = res.data.user.userId
					this.requestParams1.sbAreaSupAdmin = res.data.user.userId
					this.requestParams2.sbAreaSupAdmin = res.data.user.userId
					this.requestSelectParams.sbAreaSupAdmin = res.data.user.userId
					console.log("onShow lists1", this.lists1)
				} else if (res.code == 401) {
					uni.showToast({
						title: '您的认证出现错误，请重新登录',
						icon: 'none'
					})
					uni.removeStorageSync('token');
					uni.removeStorageSync("userInfo");
					uni.switchTab({
						url: '/pages/login/index'
					});
				} else {}
			})
			this.requestParams1.pageNum = 1
			this.requestParams2.pageNum = 1
			await this.mountSelect1()
			uni.hideLoading();
		},
		computed: {
			//未完成需要展示的
			buttonlist1() {
				let butn = []
				for (let i = 0; i < this.lists1.length; i++) {
					//同步button展示
					if (this.lists1[i].workOrderStatusName == "未接单" && (!this.lists1[i].supplierUserId)) {
						butn.push('派单');
					} else {
						butn.push("详情");
					}
				}
				return butn
			},
			buttonlist2() {
				var butn = []
				for (let i = 0; i < this.lists2.length; i++) {
					butn.push("详情")
				}
				return butn
			}
		},
		watch: {
			menu(newVal, oldVal) {
				if (oldVal == 0) {
					this.requestParams1.pageNum = 1
				} else if (oldVal == 1) {
					this.requestParams2.pageNum = 1
				} else {
					console.log('menu change.....');
				}
			}
		},
		methods: {
			async mountSelect1() { //没有派单的工单
				uni.showLoading({
					title: '正在加载中'
				})
				if (this.requestParams1.pageNum == 1) {
					this.lists1.length = 0
				}
				const resData = await request({
					url: "prod-api/system/sb-maWorkOrder/adminAreaList",
					method: "GET",
					data: this.requestParams1
				})
				console.log("响应:", resData);
				if (resData.rows) {
					this.lists1 = this.lists1.concat(resData.rows);
				}

				console.log('lists1:', this.lists1);
				if ((resData.total == this.lists1.length) && (this.requestParams1.pageNum > 1)) {
					this.requestParams1.pageNum - 1;
				} //后端出错
				uni.hideLoading()
			},
			async mountSelect2() { //已经派单的工单
				uni.showLoading({
					title: '正在加载中'
				})
				if (this.requestParams2.pageNum == 1) {
					this.lists2.length = 0
				}
				const resData = await request({
					url: "prod-api/system/sb-maWorkOrder/adminAreaList",
					method: "GET",
					data: this.requestParams2
				})
				if (resData.rows) {
					this.lists2 = this.lists2.concat(resData.rows);
				}
				if ((resData.total == this.lists2.length) && (this.requestParams2.pageNum > 1)) {
					this.requestParams2.pageNum - 1;
				} //后端出错
				uni.hideLoading()
			},
			menuClick(index) {
				console.log('正在切换');
				console.log(index);
				this.curNow = index;
				this.requestParams1.pageNum = 1;
				this.requestParams2.pageNum = 1;
				if (this.curNow == 1) {
					this.mountSelect2();
				} else if (this.curNow == 0) {
					this.mountSelect1();
				}
			},
			buttonClick1(item, name) { //派单
				console.log('item:', item);
				console.log('name:', name);
				if (name == "派单") {
					this.sendWorkOrderId = item.workOrderId;
					this.pickerShow = true;
				} else {
					uni.navigateTo({
						url: "sbma?workOrderId=" + item.workOrderId + "&canchange=" + (item
							.workOrderStatusName === "进行中" || item.workOrderStatusName === "驳回单")
					});
				}

			},
			selectConfirm(event) { //选择工程师
				console.log(event[0]);
				const supplierUserid = event[0].value; //接单者id
				const reqData = {
					workOrderId: this.sendWorkOrderId,
					supplierUserId: supplierUserid
				}
				console.log('reqData:', reqData);
				const sendName = event[0].label;
				uni.showModal({
					title: '提示',
					content: `是否分配工单给${sendName}`,
					cancelText: '否',
					confirmText: '是',
					success: (res) => {
						if (res.confirm) {
							request({
								url: 'prod-api/system/sb-maWorkOrder/sendPressOrder',
								method: 'POST',
								data: reqData
							}).then(() => {
								this.mountSelect1()
							})
						}
						this.pickerShow = false;
					}
				})
			},
			changeTime(value) {
				if (value) {
					var time = new Date(value)
				} else {
					var time = new Date()
				}
				let year = time.getFullYear() + ''
				let month = (time.getMonth() + 1) + ''
				let date = time.getDate() + ''
				let h = time.getHours() + ''
				let m = time.getMinutes() + ''
				let s = time.getSeconds() + ''
				month = month > 9 ? month : '0' + month;
				date = date > 9 ? date : '0' + date;
				s = s > 9 ? s : '0' + s
				m = m > 9 ? m : '0' + m
				const tt = year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s;
				return tt
			},

		},
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgb(225, 225, 225);

		.title {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 10rpx;
			font-size: 40rpx;
			font-weight: 600;
		}

		.footer-public {
			width: 700upx;
			background-color: white;
			margin: 0 25upx;
			border-radius: 30upx 30upx 30upx 30upx;

		}

		.footer {
			padding-bottom: 100upx;
			background-color: rgb(225, 225, 225);

			.center {
				display: flex;
				justify-content: space-around;
				height: 200upx;
				color: white;
				background-color: rgb(82, 144, 255);

				.left {
					font-size: 45rpx;
					display: flex;
					flex-direction: column;
					margin: auto 0;
				}

				.right {
					margin: auto 0;
				}
			}

			.menu {
				font-size: 40upx;
				margin-top: 30upx;
				// -background-color: lightblue;
				display: flex;
				justify-content: center;

				// background-color: red;
				#firstUtabs {
					display: inline-block;
					width: 150px;
				}

				// #search {
				// 	display: inline-block;
				// 	float: right;
				// 	width: 100px;
				// }
			}

			.xinghao {
				margin: 50upx 25upx;
				box-sizing: border-box;
				position: relative;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); //设置两层阴影


				.detail {
					display: flex;
					flex-direction: column;
					font-weight: 500;
					font-size: 30upx;
					// height: 200upx;
					justify-content: space-around;
					margin: 50upx 25upx;
					padding: 30upx 0;
				}

				.menu {
					margin-top: 30upx;
				}

				.button {
					position: absolute;
					bottom: 30upx;
					right: 80upx;
					width: 36rpx;
				}

				.state {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-family: "NSimSun", cursive, serif, sans-serif;
					font-size: 40upx;
					font-weight: bold;
					color: #ed9922;
					background-color: #417CA9;
					box-sizing: border-box;
					border-radius: 50%;
				}
			}
		}

		.tabbar {
			position: fixed;
			bottom: 30upx;
		}
	}

	.nav {
		position: sticky;
		top: 0;
		// #ifdef H5 */
		// top: 44px;
		// /* #endif */
		/* #ifndef H5

		/* #endif */
		z-index: 999;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
	}
</style>
